<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="../css/modules/input.css">
    <link rel="stylesheet" href="../css/modules/webkit.css">
    <link rel="stylesheet" href="../css/modules/nav-btn.css">
    <link rel="stylesheet" href="../css/modules/link.css">
    <link rel="stylesheet" href="../css/modules/titlebar.css">
    <link rel="stylesheet" href="../css/about.css">
  </head>
  <body>
    <div id="drag-zone"></div>
    <div id="titlebar">
        <img id="titlebar-icon" class="theme-icon" name="about-16">
        <label id="titlebar-label">About Ferny</label>
        <div id="window-controls"></div>
    </div>

    <div class="column-left">
      <div class="about-div">
          <button>
            <img class="icon" src="../imgs/icon128.png" onclick="openAppPage()" title="App page">
          </button>
          <img class="beta" src="../imgs/color48/beta.png" title="Beta">
      </div>
      <label class="title">Ferny</label><br>
      <label class="subtitle">Web Browser</label><br>
      <label id="about-app"></label>
    </div>
    <div class="column-right">
      <div class="block-title">
        <img name="info-16" class="theme-icon">
        <label>Info</label>
      </div>
      <label class="nav-label mini">
        Ferny is a privacy-focused, cross-platform, chromium-based web browser
        with a greatfull user experience, built on top of Electron, JS and styled-components.
        It aims to be fast, private, beautiful and functional.
      </label>

      <div class="block-title">
        <img name="download-16" class="theme-icon">
        <label>Updates</label>
      </div>
      <button class="nav-btn with-border" onclick="checkForUpdates()" title="Check for new version">
        <img class="theme-icon" name="reload-16">
        <label>Check for updates</label>
      </button>
      <button class="nav-btn with-border" onclick="openPlannerPage()" title="Trello page">
        <img class="theme-icon" name="calendar-16">
        <label>Updates planner</label>
      </button>
      <label class="nav-label mini">Feature is missing?</label><button onclick="openIssuesPage()" class="link">Request feature</button>

      <div class="block-title">
        <img name="user-16" class="theme-icon">
        <label>Community</label>
      </div>
      <button class="nav-btn with-border" onclick="openDiscordPage()" title="Discord channel">
        <img src="../imgs/discord16.png">
        <label>Discord chat</label>
      </button>
      <label class="nav-label mini">Have a question?</label><button onclick="openDiscordPage()" class="link">Ask here</button>
      <button onclick="openDiscordPage()" class="link">Help translate this app</button>

      <div class="block-title">
        <img name="code-16" class="theme-icon">
        <label>Created by</label>
      </div>
      <button class="nav-btn with-border" onclick="openDeveloperPage()" title="Developer page">
        <img src="../imgs/module16.png">
        <label>Module Art</label>
      </button>
      <button class="nav-btn with-border" onclick="openDonatePage()" title="Patreon page">
        <img class="theme-icon" name="coin-16">
        <label>Buy me coffee</label>
      </button>
      <label class="nav-label mini">Supporters:</label><br>
      <label class="nav-label mini">No supporters</label>
      <button onclick="openDonatePage()" class="link">Become a support</button>
      <button onclick="openDonatePage()" class="link">Donate</button>
      <div class="block-title">
        <img name="github-16" class="theme-icon">
        <label>GitHub</label>
      </div>
      <button class="nav-btn with-border" onclick="openReleasesPage()" title="GitHub page">
        <img class="theme-icon" name="download-16">
        <label>Releases</label>
      </button>
      <button class="nav-btn with-border" onclick="openIssuesPage()" title="GitHub page">
        <img class="theme-icon" name="bug-report-16">
        <label>Issues</label>
      </button>
      <label class="nav-label mini">Found a bug?</label><button class="link" onclick="openIssuesPage()" title="Create new issue on GitHub">Report</button>
      <div class="block-title">
        <img name="license-16" class="theme-icon">
        <label>License</label>
      </div>
      <button class="nav-btn with-border" onclick="openLicensePage()" title="GitHub page">
        <img class="theme-icon" name="file-16">
        <label>Show license</label>
      </button>
      <label class="nav-label">GPL-3.0</label>
      <button class="link" onclick="openLicenseFile()" title="Open license file in new tab">Open file</button>
      <div class="block-title">
        <img name="library-16" class="theme-icon">
        <label>Libraries</label>
      </div>
      <button class="link" onclick="openChromePage()" title="Chrome releases" id="about-chrome"></button>
      <button class="link" onclick="openNodePage()" title="Node previous releases" id="about-node"></button>
      <button class="link" onclick="openElectronPage()" title="Electron stable releases" id="about-electron"></button>
    </div>

    <script type="text/javascript" src="../js/about.js"></script>
  </body>
</html>
